<template>
  <el-dialog :visible="isPop" title="添加分组" width="500px" @close="onClose" append-to-body class="addGroupPop" @open="onOpen">
    <el-form :model="form" ref="form" label-width="auto" inline label-suffix="：" :rules="rules">
      <el-form-item label="分组名称" prop="name">
        <el-input v-model="form.name" :disabled="!!group && !tem"></el-input>
      </el-form-item>
      <el-form-item label="加项减项">
        <el-radio-group v-model="form.customAddReduce">
          <el-radio :label="true">加项</el-radio>
          <el-radio :label="false">减项</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否参与应发计算">
        <el-radio-group v-model="form.isYf">
          <el-radio :label="true">是</el-radio>
          <el-radio :label="false">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否参数实发计算">
        <el-radio-group v-model="form.isSf">
          <el-radio :label="true">是</el-radio>
          <el-radio :label="false">否</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="onClose">取消</el-button>
      <el-button type="primary" @click="onAffirm" :loading="loading">确认</el-button>
    </template>
  </el-dialog>
</template>
<script>
import { convertWord } from '@/util/xc/utils';
import { mapState } from 'vuex';
export default {
  name: "addGroupPop",
  props: {
    isPop: {
      type: Boolean,
      default: false,
    },
    group: [Object, String],
    tem: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.common.userInfo,
    }),
  },
  data() {
    return {
      form: {},
      initObj: {
        customAddReduce: true,
        isYf: true,
        isSf: false,
        name: "",
      },
      rules: {
        name: { required: true, message: "请输入分组名称", validator: (rule, value, callback)=>{
          if (!value) {
            rule.message = "请输入分组名称";
            return callback(new Error());
          } else if (!isNaN(Number(value))) {
            rule.message = "请输入正确的分组名称";
            return callback(new Error());
          } else {
            callback();
          }
        } },
      },
      loading: false,
    };
  },
  methods: {
    onOpen() {
      this.$nextTick(this.$refs.form?.clearValidate);
      if (this.group) {
        this.$set(this, "form", { ...this.group });
      } else {
        this.form = { ...this.initObj };
      }
    },
    onClose() {
      this.$emit("update:isPop", false);
    },

    // 确认相关

    ...{
      async onAffirm() {
        try {
          this.loading = true;
          await this.verify();
          const data = this.group ? await this.editSalaryItem() : await this.addSalaryItem();
          this.onClose();
          // if (this.group) {
          //   Object.keys(data).forEach((key) => {
          //     this.group[key] = data[key];
          //   });
          // } else
          this.$emit("affirm", {
            edit: !!this.group,
            data: JSON.parse(JSON.stringify(data))
          });
        } catch (message) {
          if (typeof message === "string" && message) this.$message({ message, type: "warning" });
        } finally {
          this.loading = false;
        }
      },
      verify() {
        return new Promise((resolve, reject) => {
          this.$refs.form.validate((valid) => {
            if (valid) resolve();
            else reject();
          });
        });
      },
      handleData(isEdit) {
        const { name, isCustom = true, customAddReduce, isYf, isSf, columnList = [] } = this.form;
        let data = {
          name, isCustom, customAddReduce, isYf, isSf, columnList,
          namePy: convertWord(name),
          companyId: this.userInfo.CompanyId
        };
        let edit = {};
        if (isEdit) {
          const { id } = this.form;
          edit = { id, };
        }
        return { ...data, ...edit };
      },
      async addSalaryItem() {
        const params = this.handleData();
        const { data, message = "添加成功" } = await this.$api.smartSalary.addSalaryItem(params).then((res) => res.data);
        this.$message({ message, type: "success" });
        return data;
      },
      async editSalaryItem() {
        const params = this.handleData(true);
        if (this.tem) {
          const { data, message = "编辑成功" } = this.tem ? await this.$api.smartSalary.editSalaryItem(params).then((res) => res.data) : {};
          // const { data, message = "编辑成功" } = await this.$api.smartSalary.addSalaryItem(params).then((res) => res.data);
          if (message) this.$message({ message, type: "success" });
        }
        return params;
      },
    },
  },
};
</script>

<style lang="less" scoped>
.addGroupPop {
  :deep( .el-dialog__body ){
    .el-form {
      display: flex;
      flex-direction: column;
      .el-form-item {
        display: flex;
        .el-form-item__content {
          display: flex;
          align-items: center;
          .el-radio {
            left: 0;
          }
        }
      }
    }
  }
}
</style>
